<template>
  <tm-drawer
    v-model:show="drawerShow"
    max-height="800rpx"
    position="bottom"
    :show-footer="false"
    :show-title="false"
  >
    <view class="overflow flex flex-col custom-drawer-container">
      <tm-input
        v-model="searchCardName"
        :placeholder="$trans('components.cardBrandDrawer.searchPlaceholder')"
        left-icon="search-2-line"
        round="50"
        fontSize="28"
        class="my-20"
        style="flex-shrink: 0"
      ></tm-input>
      <view class="flex-1 overflow">
        <view class="fulled-height overflow-x">
          <tm-row
            v-for="(item, index) in filterCardResources"
            :key="index"
            class="flex-start py-n5 border-b-1"
            @click="onChooseCardItem(item, 'card')"
          >
            <tm-image
              :round="100"
              :width="80"
              :height="80"
              :src="item.icon"
            ></tm-image>
            <tm-text class="ml-20">{{ item.name }}</tm-text>
          </tm-row>
        </view>
      </view>
    </view>
  </tm-drawer>
</template>

<script lang="ts" setup>
import { CARD_RESOURCES } from "./MOCK"
import type { ICardResourceItem } from "types/common"

const emits = defineEmits(["update:show", "choose"])
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
})

const searchCardName = ref("")
const cardResources = ref([])
const drawerShow = computed({
  get() {
    return props.show
  },
  set(val: boolean) {
    emits("update:show", val)
  },
})

const filterCardResources = computed(() => {
  if (!searchCardName.value) return cardResources.value
  return cardResources.value.filter((item: ICardResourceItem) => {
    return item.name.includes(searchCardName.value)
  })
})

const getCurrencyList = () => {
  cardResources.value = CARD_RESOURCES
}

const onChooseCardItem = (dataItem: ICardResourceItem) => {
  emits("update:show", false)
  emits("choose", dataItem)
}

onMounted(() => {
  getCurrencyList()
})
</script>
